import 'dart:async';
import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gift_listing/global.dart';
import 'package:gift_listing/manager/gift_manager.dart';
import 'package:gift_listing/pages/detail.dart';
import 'package:gift_listing/pages/edit.dart';
import 'package:provider/provider.dart';

class GiftListPage extends StatefulWidget {
  GiftListPage({Key key}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _GiftListPageState();
}

String startDate = '';

class _GiftListPageState extends State<GiftListPage> {
  List<Widget> buildList(data, _giftManager) {
    List<Widget> _children = [];
    List.generate(data.length, (index) {
      final item = data[index];
      final gifts = jsonDecode(item['gifts']);
      final completedNum = gifts.toList(growable: true);
      completedNum.retainWhere((gift) => gift['completed'] == 1);

      _children.add(InkWell(
        onTap: () {
          _giftManager.setCurrentGift(item);
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => GiftDetailPage()));
        },
        child: Container(
          padding: EdgeInsets.fromLTRB(10, 10, 15, 11),
          margin: EdgeInsets.only(bottom: 10),
          decoration: BoxDecoration(
            color: Global.fontSecondColor.withOpacity(0.08),
            borderRadius: BorderRadius.all(Radius.circular(7)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          item['title'],
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.w500,
                            color: Global.fontColor,
                          ),
                        ),
                        SizedBox(height: 5),
                        Text(
                          '${item['startDate']} - ${item['endDate']}',
                          style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w400,
                            color: Global.fontSecondColor,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 70,
                    child: Column(
                      children: [
                        Text(
                          '${completedNum.length}/${gifts.length}',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.w600,
                            color: Global.fontColor,
                          ),
                        ),
                        Container(
                          width: 45,
                          padding: EdgeInsets.all(2),
                          margin: EdgeInsets.only(top: 2),
                          decoration: BoxDecoration(
                            color: Global.fontColor.withOpacity(0.8),
                            borderRadius: BorderRadius.all(Radius.circular(2)),
                          ),
                          child: Center(
                            child: Text(
                              '${completedNum.length * 100 ~/ gifts.length}%',
                              style: TextStyle(
                                fontSize: 13,
                                fontWeight: FontWeight.w600,
                                color: Global.backgroundColor,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(height: 5),
              Text(
                item['remark'],
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w400,
                  color: Global.fontColor.withOpacity(0.8),
                ),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ));
    });
    return _children;
  }

  @override
  Widget build(BuildContext context) {
    GiftManager _giftManager = Provider.of<GiftManager>(context);
    // _giftManager.clearDb();

    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add_circle),
            tooltip: '新增',
            onPressed: () async {
              _giftManager.currentGiftRecovery();
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => GiftEditPage(),
                ),
              );
            },
          ),
        ],
        title: Text(
          '礼品清单',
          style: TextStyle(
            color: Global.fontColor,
            fontSize: 15,
          ),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(color: Global.backgroundColor),
        child: _giftManager.allGift.length > 0
            ? SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: buildList(_giftManager.allGift, _giftManager),
                ),
              )
            : Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    height: 300,
                    child: Image.asset(
                      "assets/icon/icon.png",
                      width: 200,
                    ),
                  ),
                  Text(
                    "还没有礼品清单，点击右上角按钮新建一个吧！",
                    style: TextStyle(
                      color: Global.fontSecondColor,
                      fontSize: 15,
                    ),
                  )
                ],
              ),
      ),
    );
  }
}
